/*
 * @Description: 
 * @Autor: zhangbing
 * @Date: 2021-08-13 13:56:01
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-08-13 14:36:58
 */

import React from 'react'

import styles from './ShoppingCart.module.css'

import { FiShoppingCart } from 'react-icons/fi'

interface Props {

}

interface State {
  isOpen: boolean
}

class ShoppingCart extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      isOpen: false
    }
  }

  handleClick = (e) => {
    console.log(e.target);
    console.log(e.currentTarget);

    if ((e.target as HTMLElement).nodeName === 'SPAN') {
      this.setState({
        isOpen: !this.state.isOpen
      })
    }

  }

  render() {
    return (
      <div className={styles.cartContainer}>
        <button className={styles.button}
          onClick={this.handleClick}
        >
          <FiShoppingCart />
          <span>购物车 2 （件）</span>
        </button>
        <div className={styles.cartDropDown}
          style={{
            display: this.state.isOpen ? "block" : "none"
          }}
        >
          <ul>
            <li>robot1</li>
            <li>robot2</li>
          </ul>
        </div>
      </div>
    )
  }
}

export default ShoppingCart
